// components/HeaderTitle/index.tsx
import React from 'react'
import {View, Text} from '@tarojs/components'
import Taro from "@tarojs/taro";
import { Image } from '@nutui/nutui-react-taro'

import './index.scss'

interface HeaderTitleProps {
  title: string
  onBack?: () => void
}

const HeaderTitle: React.FC<HeaderTitleProps> = (props) => {
  const {
    title,
    onBack
  } = props

  const handleBack = () => {
    Taro.navigateBack()
  }

  return (
    <View className="header-title-container">
      <View className="status-bar-placeholder"></View>
      <View className="header-title-content">
        <View className="left-section">
          <View className="back-container" onClick={onBack || handleBack}>
            <Image className="back-icon"
                   src={require('@/assets/icon_header_back.png')}
                   width={17}
                   height={17}/>
            <Text className="title-text">{title}</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

export default HeaderTitle
